<template>
  <div>
    <h1 style="font-size: 28px">新建用户</h1>
    <div>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="账号名称" required>
          <a-input v-model:value="user_name"/>
        </a-form-item>
        <a-form-item label="用户昵称" required>
          <a-input v-model:value="nick_name"/>
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea v-model:value="intro"/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" style="width: 140px;" @click="onConfirm">确定</a-button>
          <a-button style="width: 140px;margin-left: 20px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts">
  import {defineComponent, ref} from 'vue';
  import {message} from 'ant-design-vue';
  import {createUser} from "/@/api/core/user";
  import {HttpResult} from "/@/api/core/model/coreModel";
  import {CoreUtils} from "/@/utils/coreUtils";

  export default defineComponent({
    name: 'UserAdd',
    props: {
      viewType: {
        type: String,
        default: null,
      }
    },
    setup(props, {emit}) {

      const user_name = ref('');
      const nick_name = ref('');
      const intro = ref('');

      const onConfirm = () => {
        if (!CoreUtils.isAccount(user_name.value)) {
          message.warn("请输入有效的2-30位账户名称");
          return;
        }
        if (!CoreUtils.isAccount(nick_name.value)) {
          message.warn("请输入有效的2-30位用户昵称");
          return;
        }
        createUser({
          user_name: user_name.value,
          nick_name: nick_name.value,
          intro: intro.value
        }).then((result: HttpResult) => {
          if (result.code == 0) {
            message.success("新建成功");
            emit("my-emit", 'Confirm');
          } else {
            message.error(result.message);
          }
        });
      }

      const onBack = () => {
        emit("my-emit", 'Cancel');
      }

      return {
        user_name,
        nick_name,
        intro,
        onConfirm,
        onBack,
      };
    }
  });

</script>

<style scoped>

</style>
